<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>TagCloud color selection demo</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtagcloud.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script>
        $(document).ready(function () {
            var unemploymentRate = [
                { "country": "Namibia", "rate": 37.6 },
                { "country": "Macedonia, FYR", "rate": 32.0 },
                { "country": "Latvia", "rate": 18.7 },
                { "country": "Lithuania", "rate": 17.8 },
                { "country": "Estonia", "rate": 16.9 },
                { "country": "Serbia", "rate": 16.6 },
                { "country": "Georgia", "rate": 16.5 },
                { "country": "Yemen, Rep.", "rate": 14.6 },
                { "country": "Slovak Republic", "rate": 14.4 },
                { "country": "Dominican Republic", "rate": 14.2 },
                { "country": "Tunisia", "rate": 14.2 },
                { "country": "Armenia", "rate": 28.6 },
                { "country": "Bosnia and Herzegovina", "rate": 27.2 },
                { "country": "Lesotho", "rate": 25.3 },
                { "country": "South Africa", "rate": 24.7 },
                { "country": "Spain", "rate": 20.1 },
                { "country": "Albania", "rate": 13.8 },
                { "country": "Ireland", "rate": 13.6 },
                { "country": "Jordan", "rate": 12.9 },
                { "country": "Greece", "rate": 12.5 }
            ];
            var source =
            {
                datatype: "array",
                localdata: unemploymentRate,
                datafields: [
                    { name: 'country' },
                    { name: 'rate' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {});
            $('#tagCloud').jqxTagCloud({
                width: '600px',
                height: '200px',
                source: dataAdapter,
                fontSizeUnit: 'px',
                minFontSize: 12,
                maxFontSize: 20,
                displayMember: 'country',
                valueMember: 'rate',
                urlBase: 'http://localhost/',
                minColor: '#00AA99',
                maxColor: '#FF0000'
            });

            function getTextElementByColor(color) {
                if (color == 'transparent' || color.hex == "") {
                    return $("<div style='text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;'>transparent</div>");
                }

                var element = $("<div style='text-shadow: none; position: relative; padding-bottom: 2px; margin-top: 2px;'>#" + color.hex + "</div>");
                var nThreshold = 105;
                var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
                var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
                element.css('color', foreColor);
                element.css('background', "#" + color.hex);
                element.addClass('jqx-rc-all');
                return element;
            }

            $("#colorPicker").on('colorchange', function (event) {
                $("#dropDownButton").jqxDropDownButton('setContent', getTextElementByColor(event.args.color));
                $('#tagCloud').jqxTagCloud({ 'minColor': "#" + event.args.color.hex });
            });
            $("#colorPicker2").on('colorchange', function (event) {
                $("#dropDownButton2").jqxDropDownButton('setContent', getTextElementByColor(event.args.color));
                $('#tagCloud').jqxTagCloud({ 'maxColor': "#" + event.args.color.hex });
            });

            $("#colorPicker").jqxColorPicker({ color: "00AA99", colorMode: 'hue', width: 220, height: 220 });
            $("#dropDownButton").jqxDropDownButton({ width: 150, height: 22 });
            $("#dropDownButton").jqxDropDownButton('setContent', getTextElementByColor(new $.jqx.color({ hex: "00AA99" })));
            $("#colorPicker2").jqxColorPicker({ color: "FF0000", colorMode: 'hue', width: 220, height: 220 });
            $("#dropDownButton2").jqxDropDownButton({ width: 150, height: 22 });
            $("#dropDownButton2").jqxDropDownButton('setContent', getTextElementByColor(new $.jqx.color({ hex: "FF0000" })));
        });
    </script>
</head>

<body>
    <div id="tagCloud"></div>
    <div>
        <div style="float: left">
            <label style="margin-left: 5px; font-size: 12px; font-family: Verdana;">Select Min color</label>

            <div style="margin: 3px;" id="dropDownButton">
                <div style="padding: 3px;">
                    <div id="colorPicker">
                    </div>
                </div>
            </div>
        </div>
        <div style="float: left">
            <label style="margin-left: 5px; font-size: 12px; font-family: Verdana;">Select Max color</label>

            <div style="margin: 3px;" id="dropDownButton2">
                <div style="padding: 3px;">
                    <div id="colorPicker2">
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>
